---
import { type Post, getStyle } from "../lib/postUtils";

interface Props {
    index: number;
    post: Post;
}

const { index, post } = Astro.props as Props;

const [color] = getStyle(post.data.category);
---

<a
    id={`slide-${index}`}
    data-slide-index={index}
    class="relative group snap-center shrink-0
    w-full md:w-2/3 lg:w-1/2 aspect-16/9 overflow-hidden
    border-3"
    href={post.url}
>
    {/* Cover Image */}
    {
        post.data.coverImage && (
            <img
                src={post.data.coverImage}
                alt={post.data.title}
                class="absolute inset-0 
                h-full w-full object-cover object-center bg-black"
            />
        )
    }
    <div
        class={`absolute bottom-0 mt-48 border-t-3 border-black w-full px-4 md:px-6 py-1 flex flex-col 
                opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out ${color}`}
    >
        <h3 class="font-bold text-lg md:text-xl lg:text-3xl leading-tight mb-1">
            {post.data.title}
        </h3>
        <p class="text-sm md:text-base lg:text-lg">
            {post.data.description}
        </p>
    </div>
</a>
